<template>
  <div class="car">
    <div class="top">
      <van-nav-bar
        title="购物车"
        right-text="..."
        left-arrow
        @click-left="onClickLeft"
      />
    </div>
    <div class="content">
      <van-empty
        description="你的购物车空空如也"
        image="http://static.epetbar.com/mini_images/emall/cart_bitmap.png"
      >
        <van-button round plain type="primary" class="bottom-button"
          >去逛一逛</van-button
        >
      </van-empty>
    </div>
    <div class="tip">
      <van-notice-bar mode="closeable" :scrollable="false"
        >您今日还有1个0元赠品未领取，快去挑选吧&gt;
        <span>不再提醒 |</span></van-notice-bar
      >
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  methods: {
    onClickLeft() {
      this.$router.go(-1);
    },
  },
};
</script>

<style lang="scss">
.car {
  width: 100%;
  height: 100%;
  background-color: rgb(243, 244, 245);
  .top {
    .van-nav-bar__right {
      .van-nav-bar__text {
        height: 40px;
        color: #333;
        font-size: 30px;
      }
    }
  }
  .content {
    background-color: #fff;
    .van-empty {
      .van-empty__image {
        width: 232px;
        height: 139px;
      }
      .van-button {
        height: 30px;
      }
      .van-button--normal {
        padding: 0 24px;
      }
    }
  }
  .tip {
    padding-bottom: 57px;

    .van-notice-bar {
      margin-top: 230px;
    }
    .van-notice-bar__content {
      width: 320px;
      font-size: 12px;
      display: flex;
      justify-content: space-between;
    }
    .van-notice-bar__right-icon {
      font-size: 12px;
    }
  }
}
</style>